<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档阅读 - 无界Markdown阅读器</title>
    <link rel="stylesheet" href="/reader-styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
</head>
<body>
    <div class="reader-container">
        <header class="reader-header">
            <div class="header-content">
                <div class="logo">
                    <a href="/">📖 无界Markdown阅读器</a>
                </div>
                <div class="header-actions">
                    <button class="action-btn" id="toggleTheme" title="切换主题">
                        🌙
                    </button>
                    <button class="action-btn" id="toggleToc" title="目录">
                        📋
                    </button>
                    <button class="action-btn" id="exportHtml" title="导出HTML">
                        📄
                    </button>
                    <button class="action-btn" id="shareBtn" title="分享">
                        🔗
                    </button>
                </div>
            </div>
        </header>

        <div class="reader-layout">
            <aside class="toc-sidebar" id="tocSidebar">
                <div class="toc-header">
                    <h3>📋 目录</h3>
                    <button class="close-toc" id="closeToc">×</button>
                </div>
                <nav class="toc-nav" id="tocNav">
                    <!-- 目录将通过JavaScript生成 -->
                </nav>
            </aside>

            <main class="reader-main">
                <div class="document-info" id="documentInfo">
                    <div class="loading" id="loadingSpinner">
                        <div class="spinner"></div>
                        <p>正在加载文档...</p>
                    </div>
                </div>

                <article class="document-content" id="documentContent">
                    <!-- 文档内容将通过JavaScript加载 -->
                </article>

                <div class="document-actions" id="documentActions" style="display: none;">
                    <div class="actions-grid">
                        <button class="action-card" id="exportHtmlCard">
                            <div class="action-icon">📄</div>
                            <div class="action-text">
                                <h4>导出HTML</h4>
                                <p>保存为HTML文件</p>
                            </div>
                        </button>
                        
                        <button class="action-card" id="printDoc">
                            <div class="action-icon">🖨️</div>
                            <div class="action-text">
                                <h4>打印文档</h4>
                                <p>打印或保存为PDF</p>
                            </div>
                        </button>
                        
                        <button class="action-card" id="copyLink">
                            <div class="action-icon">🔗</div>
                            <div class="action-text">
                                <h4>复制链接</h4>
                                <p>分享给其他人</p>
                            </div>
                        </button>
                        
                        <a href="/" class="action-card">
                            <div class="action-icon">📁</div>
                            <div class="action-text">
                                <h4>上传新文档</h4>
                                <p>返回首页上传</p>
                            </div>
                        </a>
                    </div>
                </div>
            </main>
        </div>

        <div class="reading-progress" id="readingProgress">
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill"></div>
            </div>
        </div>
    </div>

    <!-- 分享弹窗 -->
    <div class="modal" id="shareModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>🔗 分享文档</h3>
                <button class="modal-close" id="closeShareModal">×</button>
            </div>
            <div class="modal-body">
                <p>复制下面的链接分享给其他人：</p>
                <div class="share-url-container">
                    <input type="text" id="shareUrlInput" readonly>
                    <button class="copy-btn" id="copyShareUrl">复制</button>
                </div>
                <div class="share-stats" id="shareStats">
                    <!-- 访问统计信息 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 通知 -->
    <div class="notification" id="notification"></div>

    <script src="/reader-script.js"></script>
</body>
</html>